<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>薪资套账添加</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-blue/easyui.css">
</head>
<body>
<style type="text/css">
	*{
			margin:0px;
			padding:0px;
	}
	.background{
		width: 1120px;
	    height: 570px;
	    margin: 0px auto;
	    margin-top: 10px;
	    background-color: #FFF;
	}
	.notice-head{
		width: 1100px;
	    height: 45px;
	    border-bottom: 1px solid #F3F3F9;
	    color: #19AA9A;
	    font-size: 18px;
	    text-align: center;
	    line-height: 45px;
	    font-weight: 700;
	}
	.bianji-center{
		width: 930px;
    	height: 350px;
	    border: 1px dashed #18A689;
	    margin: 0px auto;
	    position: relative;
	    top: 15px;
	}
	.center{
		width:600px;
		height: 165px;
		margin:0px auto;
		margin-top:20px;
	}
	.textbox-invalid,.validatebox-invalid{
		border:1px solid #CCCCCC;
		background-color: #fff;	
		height:24px;
		font-size:14px;
		line-height: 24px;
	}
	.textbox{
		height:24px;
		border:1px solid #CCCCCC;
		width: 150px;
	}
	.quxiao{
		background:#d9534f;
		border-radius:3px;
		color:white;
		width:75px;
		height:25px;
		border:none;
		outline: none;
		cursor:pointer;
		margin-left:10px;
	}
	.quxiao:hover{
		background-color:#C9302C;
	}
	.queding{
		background:#17AA8D;
		border-radius:3px;
		color:white;
		width:75px;
		height:25px;
		border:none;
		outline: none;
		cursor:pointer;
		margin-top: 80px;
		margin-left:490px;	
	}
	.queding:hover{
		background-color:#13826B;
	}
	.text1{
		margin-right: 40px;
		font-size: 14px;
    	font-weight: 700;
    	background-color: #fff;
	}
	#name{
		width: 150px;
	    height: 24px;
	    border: 1px solid #ccc;
	    margin-left: -40px;
	    background-color:#fff;
	}
	.text2{
		margin-left: 110px;
		font-size: 14px;
    	font-weight: 700;
	}
	#salary{
		width: 150px;
	    height: 24px;
	    margin-bottom: 40px;
	    background-color:#fff;
	    border: 1px solid #ccc;
	}
	.text3{
		margin-right: 40px;
		font-size: 14px;
    	font-weight: 700;
    	margin-left: 13px;
	}
	#sheng{
		width: 150px;
	    height: 24px;
	    border: 1px solid #ccc;
	    background-color:#fff;
	}
	.text4{
		margin-left: 125px;
		font-size: 14px;
    	font-weight: 700;
	}
	#preson{
		width: 150px;
	    height: 24px;
	    border: 1px solid #ccc;	    
	    background-color:#fff;
	    position: relative;
    	left: 41px;
	}
	.inputs{
		width: 147px;
	    height: 24px;
	    float: right;
	    margin-bottom: 40px;
	    border:1px solid #fff;
	}
	.text5{
		margin-left: 14px;
		font-size: 14px;
    	font-weight: 700;
	}
	#beizhu{
		width: 150px;
	    height: 24px;
	    background-color:#fff;
	    border: 1px solid #ccc;
	    margin-bottom: 40px;
	}
	.text7{
		font-size: 14px;
    	font-weight: 700;
    	position: relative;
    	top: 30px;
	}
	#tzry{
		width: 493px;
	    height: 24px;
	    background-color: #fff;
	    border: 1px solid #ccc;
	    margin-bottom: 40px;
	    margin-left: 72px;
	   	margin-top:10px;
	}
	.text8{
		font-size: 14px;
    	font-weight: 700;
    	margin-left: 28px;
	}
	#remarks{
		width: 493px;
	    height: 24px;
	    background-color: #fff;
	    border: 1px solid #ccc;
	    
	}
	.table{
		width: 1000px;
	    margin: 0px auto;
	}
	.table .datagrid-header td, .datagrid-body td, .datagrid-footer td {
		text-align: center;
		margin: -15px;
	}
	.table .datagrid-header .datagrid-cell {
		background-color: #ccc;
	    height: 30px;
	    line-height: 30px;
	}
	.title{
		width: 1100px;
	    height: 25px;
	    margin: 0px auto;
	    position: relative;
	    top: 6px;
	    color: #18A689;
	    font-size: 20px;
	    text-align: center;
	}
	.table-title{
		width:1100px;
		height:30px;
		margin-top: 20px;
	}
	.xiangmu{
	    width: 70px;
	    height: 30px;
	    font-size: 16px;
	    margin-left: 78px;
	    float: left;
	}
	.xinzeng{
		width: 50px;
	    height: 25px;
	    border: 1px solid #fff;
	}
	.pay-div{
		width:500px;
		height:30px;
		margin: 0px auto;
		margin-top: 20px;
	}
	.pay-text3{
		margin-left: 12px;
	}
	.pay-text4{
		margin-left: 87px;
	}
	.pay-input1{
		width: 150px;
	    height: 25px;
	    background-color: #fff;
	    border: 1px solid #ccc;
	    margin-right: 75px;
	}
	.pay-input2{
		width: 150px;
	    height: 25px;
	    background-color: #fff;
	    border: 1px solid #ccc;
	}
	.window-shadow{
		position: relative;
    	top: -273px;
		background: #F8F8F8;
	    opacity: 0.4;
	    border: 1px solid #F8F8F8;
		
	}
	.guanbi{
		border: 1px solid #ccc;
	    margin-top: 55px;
	    background-color: #fff;
	    width: 50px;
	    height: 25px;
	    margin-right: 10px;
	}
	.win-queding{	    
	    border: 1px solid #ccc;
	    margin-top: 55px;
	    margin-left: 235px;
	    background-color: #fff;
	    width: 50px;
	    height: 25px;
	    margin-right: 10px;
	}
	.window{
		margin-top:-54px;
	}
	#account_select{
		width: 131px;
	}
	.table-title .textbox{
	    margin-left: 743px;
	    margin-top: -3px;
	}
</style>
<script type="text/javascript">
	function add(text){
		$("#content-admin").panel({
			href:text
		});
	}
	function quxiao(){
		add("salary-emp");		
	}
	$(function(){
		$("#table_account").datagrid({
			url:'',
			singleSelect:true,			
			columns:[[{field:'items_name',title:'项目名称',width:230},
	           		{field:'items_type',title:'项目类型',width:230},
	           		{field:'sc_formula',title:'百分比',width:270},
	           		{field:'sc_explain',title:'计算说明',width:270},
	           		{field:'sc_danwei',title:'单位',width:270}
          ]]
		});
		$('#preson').combogrid({
	        panelWidth:250,
	        url:'select_sousuoKuang',
	        singleSelect:true,
	        idField:'Staff_name',
	        treeField:'Staff_name',
	        columns:[[
	        	{field:'sortable',title:'#',width:28},
	        	{field:'staff_id',hidden:true},
	            {field:'Staff_name',title:'姓名',width:60},
	            {field:'depart_name',title:'部门',width:60},
	            {field:'Staff_phone',title:'联系电话',width:100}
	        ]],
	        onClickRow:function(rowIndex, rowData){
	    		$("#chuang").val(rowData['staff_id']);
	    	}
	    });
		$('#beizhu').combogrid({
	        panelWidth:250,
	        url:'select_sousuoKuang',
	        singleSelect:true,
	        idField:'Staff_name',
	        treeField:'Staff_name',
	        columns:[[
	        	{field:'sortable',title:'#',width:28},
	        	{field:'staff_id',hidden:true},
	            {field:'Staff_name',title:'姓名',width:60},
	            {field:'depart_name',title:'部门',width:60},
	            {field:'Staff_phone',title:'联系电话',width:100}
	        ]],
	        onClickRow:function(rowIndex, rowData){
	    		$("#sheng").val(rowData['staff_id']);
	    	}
	    });
		$("#qx_tree").hide();
		$("#tzry").dblclick(function(){
			$("#qx_tree").hide();
		});
		$("#tzry").click(function(){
			$("#qx_tree").show();
		}); 
		$('#qx_tree').tree({
			checkbox:true,
			onlyLeafCheck:true,
		    url:'select-ppp',
		    onCheck:function(node){
		    	var nodes = $('#qx_tree').tree('getChecked');
				var names=[];
				var ids=[];
				//循环选中的节点
				for (var i = 0; i < nodes.length; i++) {
					//获取三级功能id，存入数组
					names.push(nodes[i].text);
					ids.push(nodes[i].id);
					/* //根据三级的节点，获取二级
					var parent = $("#qx_tree").tree("getParent",nodes[i].target);
					if(parent != null){
						names.push(parent.text);
						ids.push(parent.id);
						
						//根据二级的节点，获取一级
						 var root = $("#qx_tree").tree("getParent",parent.target);
						if(root != null){
							names.push(root.text);
						} 
					} */
				}
				
				//去重
				function dedupe(array){
					 return Array.from(new Set(array));
				}
				
				names = dedupe(names) //保证一级和二级在数组中不重复
				ids=dedupe(ids)
				$("#tzry").val(names);
				$("#idss").val(ids);
		    }
		});  
	});
</script>
	<div class="background">
			<div class="notice-head">套账添加</div>
			<div class="bianji-center">
				<div class="center">
					<form id="form" method="post">
						<input type="hidden" id="id" name="account_id">
						<span class="text1">套账名称：</span>
						<input type="text" id="name" name="accountName">
						<span class="text2">基本薪资：</span>
						<input type="text" id="salary" class="easyui-numberbox" value="8000" data-options="min:0,precision:2" name="saBase" ><br/>
						<span class="text7">套账人员：</span>
						<input type="text" id="tzry" readonly="readonly">
						<ul id="qx_tree" style="margin:-40px auto 3px 72px;padding-top: 20px;width:200px;height:340px;border:solid 1px #ccc;background-color:#fff;position: relative;display: none;"></ul>
						<input type="hidden" id="idss">
						<span class="text8">备注：</span>
						<input type="text" id="remarks" name="saRemarks">
					</form>
				</div>
			</div>
			<button class="queding">确定</button><button class="quxiao" onclick="quxiao()">取消</button>
	</div>	
	<script type="text/javascript">
		$(function(){
			$(".queding").click(function(){
				var functionIds = [];
				var nodes = $('#qx_tree').tree('getChecked', ['checked','indeterminate']);
				//循环选中的节点
				for (var i = 0; i < nodes.length; i++) {
					//获取三级功能id，存入数组
					functionIds.push(nodes[i].id);
					/* //根据三级的节点，获取二级
					var parent = $("#qx_tree").tree("getParent",nodes[i].target);
					if(parent != null){
						functionIds.push(parent.id);
						//根据二级的节点，获取一级
						var root = $("#qx_tree").tree("getParent",parent.target);
						if(root != null){
							functionIds.push(root.id);
						}
					} */
				}
				
				//去重
				function dedupe(array){
					 return Array.from(new Set(array));
				}
				functionIds = dedupe(functionIds) //保证一级和二级在数组中不重复
				var b=JSON.stringify(functionIds);
				var accountName=$("#name").val();
				var saBase=$("#salary").val();
				var saRemarks=$("#remarks").val();
				console.log(b);
				
				var str=$("#tzry").val();
				/*
				str=JSON.stringify($("#idss").val());
				console.log(str); */
				if(accountName==""||accountName==null){
					alert("请输入套账");
					return false;
				}else if(saBase==0||saBase==null){
					alert("请输入基本工资");
					return false;
				}else if(str==null||str==""){
					alert("请选择套账人员");
					return false;
				}else{
					$.ajax({
						url:"account-xz",
						type:"post",
						data:{"tzyg_id":b,"accountName":accountName,"saBase":saBase,"saRemarks":saRemarks},
						success:function(data){
							alert("套账新增成功");
							$("#content-admin").panel('open').panel('refresh','salary-emp');
			            }
					});
				}
		})
	})
	</script>
</body>
</html>